<template>
  <div class="app-container">
    <cus-wraper>
      <cus-filter-wraper>
        <div>
          <el-input v-model="listQuery.id" placeholder="请输入ID" class="topInput" clearable></el-input>
          <el-input v-model="listQuery.keyWord" placeholder="请输入关键词" class="topInput" clearable></el-input>
          <el-button type="primary" @click="getList" icon="el-icon-search">查询</el-button>
          <el-button type="info" @click="reGetList" icon="el-icon-search">重置</el-button>
        </div>
        <el-button type="primary" @click="handleCreate" icon="el-icon-search" style="max-height: 36px;">创建</el-button>
      </cus-filter-wraper>
      <div class="table-container">
        <el-table v-loading="listLoading" :data="list" size="mini" fit element-loading-text="Loading" border
                  highlight-current-row align="center">
          <el-table-column label="id" prop="id" align="center"></el-table-column>
          <el-table-column label="敏感词" prop="keyWord" align="center"></el-table-column>
          <el-table-column label="类型" prop="type" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.type === 1">反动词汇</div>
              <div v-if="scope.row.type === 2">民生</div>
              <div v-if="scope.row.type === 3">色情 </div>
              <div v-if="scope.row.type === 4">其他</div>
              <div v-if="scope.row.type === 4">贪腐</div>
              <div v-if="scope.row.type === 4">暴恐</div>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createdTime" align="center"></el-table-column>
          <el-table-column align="center" width=200 label="操作">
            <template slot-scope="scope">
              <cus-del-btn @ok="handleDelete(scope.row)"/>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <cus-pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList"/>
      </div>

      <el-dialog v-dialogDrag :title="titleMap[dialogStatus]" :visible.sync="dialogVisible" width="40%" @close="handleDialogClose">
        <el-form ref="dataForm" :model="form" :rules="rules" label-width="120px" class="demo-ruleForm">
          <el-form-item label="敏感词:">
            <el-input v-model="form.keyWord" placeholder="请输入内容" style="max-width: 200px;"></el-input>
          </el-form-item>
          <el-form-item label="类型:">
            <el-select filterable v-model="form.type" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false"> 取 消 </el-button>
          <el-button type="primary" @click="submitForm"> 确 认 </el-button>
        </span>
      </el-dialog>
    </cus-wraper>
  </div>
</template>

<script>
  import { getSysUserPage, updateById, deleteSysUser} from '@/api/keyword/keyword'

  export default {
    data() {
      return {
        dialogVisible: false,
        list: [],
        listLoading: true,
        total: 0,
        listQuery: {
          page: 1,
          pageSize: 10,
          id: undefined,
          keyWord: undefined,
        },
        form: {
          type: undefined, //账号
          keyWord: undefined, //账号
        },
        dialogStatus: '',
        titleMap: {
          update: '查看',
          create: '创建'
        },
        options: [{
          value: '1',
          label: '反动词汇'
        }, {
          value: '2',
          label: '民生'
        }, {
          value: '3',
          label: '色情'
        }, {
          value: '4',
          label: '其他'
        }, {
          value: '5',
          label: '贪腐'
        }, {
          value: '6',
          label: '暴恐'
        }],
        rules: {
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        let data = this.listQuery
        this.listLoading = true;
        getSysUserPage(data).then(response => {
          if(response.code===-1){
            this.listLoading = false
          }
          // data = undefined
          this.list = response.data.records
          this.total = response.data.total
          this.listLoading = false
        })
      },
      reflag(){
        let data = this.listQuery
        data.id = undefined
        data.keyWord = undefined
      },
      async reGetList(){
        await this.reflag()
        await this.getList()
      },
      handleCreate() {
        this.resetForm()
        this.dialogStatus = 'create'
        this.dialogVisible = true
      },
      handleUpdate(row) {
        this.form = Object.assign({}, row)
        this.dialogStatus = 'update'
        this.dialogVisible = true
      },
      handleDelete(row) {
        let id = row.id
        deleteSysUser(id).then(response => {
          if (response.code === 0) {
            this.getList()
            this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
          }
        })
      },
      submitForm() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            updateById(this.form).then(response => {
              if (response.code === 0) {
                this.getList()
                this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
                this.dialogVisible = false
              } else {
                this.$message({
                message: response.message,
                type: 'error'
            });
              }
            }).catch(err => {

            })
          }
        })
      },
      resetForm() {
        this.form = {
          id: undefined, //主键ID
          username: undefined, //账号
        }
      },
      // 监听dialog关闭时的处理事件
      handleDialogClose() {
        if (this.$refs['dataForm']) {
          this.$refs['dataForm'].clearValidate() // 清除整个表单的校验
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .isAuthBox{
    border-top: 1px solid #E8E8E8;
    padding-top: 10px;
  }
  .isAuthBoxT{
    height: 36px;
    line-height: 36px;
    span{width: 120px;display: inline-block;text-align: right;font-weight: 600;}
  }
  .isAuthBoxB{
    span{width: 120px;display: inline-block;text-align: right;font-weight: 600;}
    input{height: 20px;line-height: 20px;}
  }
  .table-container /deep/ .cell{
    display:flex;
    justify-content: center;
  }
  .topInput{
    width:200px;margin: 0 10px 10px 0;
  }
  .filter-wraper{
    display: flex;
    justify-content: space-between;
  }
</style>
